<!-- 用户编辑弹窗 -->
<template>
  <div>
    <el-tabs type="border-card" @tab-click="click_tap" v-model="activeName">
      <el-tab-pane label="班级考勤" name="bjkq">
        <el-form
          :model="query"
          label-width="50px"
          class="ele-form-search"
          @keyup.enter.native="reload"
          @submit.native.prevent
        >
          <el-row :gutter="20">
            <el-col :lg="5" :md="12">
              <el-form-item label="性别:">
                <el-select
                  style="width: 100%"
                  clearable
                  v-model="query.gender"
                  placeholder="请选择性别"
                >
                  <el-option value="99" label="全部" />
                  <el-option value="2" label="女" />
                  <el-option value="1" label="男" />
                  <el-option value="0" label="保密" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="7" :md="12">
              <el-form-item label-width="0">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="query.keyword"
                  placeholder="输入姓名或学号、身份证号码、设备IME1等关键词"
                />
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="12">
              <el-form-item label-width="0">
                <el-date-picker
                  v-model="query.day_time"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="7" :md="12">
              <div class="ele-form-actions">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="ele-btn-icon"
                  @click="apiListss"
                  >查询
                </el-button>
                <el-button
                  @click="
                    query.page = 1;
                    query.sex = '1';
                    query.keyword = '';
                    query.day_time = '';
                    apiListss();
                  "
                  >重置</el-button
                >
                <el-button @click="exportExcel(1)">导出学生信息</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <!-- 数据表格 -->
        <el-table
          border
          lazy
          ref="table"
          :data="list"
          v-loading="loading"
          height="calc(100vh - 315px)"
        >
          <el-table-column label="序号" width="55" align="center" type="index">
            <template slot-scope="scope">
              <span
                v-text="$setTableIndex(query.page, query.limit, scope.$index)"
              >
              </span>
            </template>
          </el-table-column>
          <el-table-column label="头像" align="center" prop="avatar">
            <template slot-scope="scope">
              <img
                v-lazy="$api + scope.row.avatar"
                style="width: 50px; height: 50px"
              />
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" prop="name" />
          <el-table-column label="学号" align="center" prop="student_no" />
          <el-table-column label="身份证号" align="center" prop="id_card" />
          <el-table-column label="学校" align="center" prop="schoole_name" />
          <el-table-column label="年级" align="center" prop="grade_title">
          </el-table-column>
          <el-table-column label="班级" align="center" prop="class_title">
          </el-table-column>
          <el-table-column label="是否到校" align="center" prop="work_count" >
            <template slot-scope="{ row }">
              <el-tag v-if="row.work_count>0">是</el-tag>
              <el-tag type="danger" v-else>否</el-tag>
            </template>
          </el-table-column>·
          <el-table-column label="统计时间" align="center" prop="work_count" >
            <template>
              {{ obj.day_time || '暂无' }}
            </template>
          </el-table-column>
        </el-table>
        <div class="ele-pagination">
          <pagination
            :total="total"
            :page.sync="query.page"
            :limit.sync="query.limit"
            @pagination="apiListss"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="月统计" name="ytj">
        <el-form
          :model="query"
          label-width="50px"
          class="ele-form-search"
          @keyup.enter.native="reload"
          @submit.native.prevent
        >
          <el-row :gutter="20">
            <el-col :lg="5" :md="12">
              <el-form-item label="性别:">
                <el-select
                  style="width: 100%"
                  clearable
                  v-model="query.gender"
                  placeholder="请选择性别"
                >
                  <el-option value="99" label="全部" />
                  <el-option value="0" label="女" />
                  <el-option value="1" label="男" />
                  <el-option value="2" label="保密" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="7" :md="12">
              <el-form-item label-width="0">
                <el-input
                  clearable
                  :maxlength="20"
                  v-model="query.keyword"
                  placeholder="输入姓名或学号、身份证号码、设备IME1等关键词"
                />
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="12">
              <el-form-item label-width="0">
                <el-date-picker
                  v-model="query.month_time"
                  value-format="yyyy-MM"
                  type="month"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :lg="7" :md="12">
              <div class="ele-form-actions">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  class="ele-btn-icon"
                  @click="apiListss1"
                  >查询
                </el-button>
                <el-button
                  @click="
                    query.page = 1;
                    query.sex = '99';
                    query.keyword = '';
                    query.month_time = '';
                    apiListss1();
                  "
                  >重置</el-button
                >
                <el-button @click="exportExcel(2)">导出学生信息</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <!-- 数据表格 -->
        <el-table
        border
        lazy
        ref="table"
        :data="list"
        v-loading="loading"
        height="calc(100vh - 315px)"
      >
        <el-table-column label="序号" width="55" align="center" type="index">
          <template slot-scope="scope">
            <span
              v-text="$setTableIndex(query.page, query.limit, scope.$index)"
            >
            </span>
          </template>
        </el-table-column>
        <el-table-column label="头像" align="center" prop="avatar">
          <template slot-scope="scope">
            <img
              v-lazy="$api + scope.row.avatar"
              style="width: 50px; height: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center" prop="name" />
        <el-table-column label="学号" align="center" prop="student_no" />
        <el-table-column label="身份证号" align="center" prop="id_card" />
        <el-table-column label="学校" align="center" prop="schoole_name" />
        <el-table-column label="年级" align="center" prop="grade_title">
        </el-table-column>
        <el-table-column label="班级" align="center" prop="class_title">
        </el-table-column>
        <el-table-column label="到校次数" align="center" prop="work_count" >
          <template slot-scope="{ row }">
            {{row.work_count}}次
          </template>
        </el-table-column>
        <el-table-column label="缺勤次数" align="center" prop="work_count" >
          <template slot-scope="{ row }">
            {{row.absence_count}}次
          </template>
        </el-table-column>
        <el-table-column label="统计时间" align="center" prop="work_count" >
          <template >
            {{ obj.month_time || '暂无' }}
          </template>
        </el-table-column>
      </el-table>
        <div class="ele-pagination">
          <pagination
            :total="total"
            :page.sync="query.page"
            :limit.sync="query.limit"
            @pagination="apiListss1"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "bjkq",
  props: {
    // 弹窗是否打开
    // 修改回显的数据
    data: Object,
    name: String,
    id: Number,
  },
  // components: { Treeselect},
  data() {
    return {
      nianji: [
        "一年级",
        "二年级",
        "三年级",
        "四年级",
        "五年级",
        "六年级",
        "七年级",
        "八年级",
        "九年级",
      ],
      query: {
        page: 1,
        limit: 20,
        gender: "99",
        keyword: "",
        day_time: "",
        month_time: "",
      },
      list: [],
      loading: true,
      total: 0,
      activeName: "bjkq",
      obj:{

      }
    };
  },
  watch: {
    data() {
      this.query.page = 1;
      this.apiListss();
    },
  },
  mounted() {
    this.query = {
      page: 1,
      limit: 20,
      gender: "99",
      keyword: "",
      day_time: "",
      month_time: "",
    };
    this.apiListss();
  },
  methods: {
    click_tap(e) {
      console.log(e);
      if (e.label == "班级考勤") {
        this.query = {
          page: 1,
          limit: 20,
          gender: "99",
          keyword: "",
          day_time: "",
          month_time: "",
        };
        this.apiListss();
      } else {
        this.query = {
          page: 1,
          limit: 20,
          gender: "99",
          keyword: "",
          day_time: "",
          month_time: "",
        };
        this.apiListss1();
      }
    },
    /* 更新visible */
    updateVisible(value) {
      this.$emit("shows", value);
    },
    apiListss() {
      this.$http
        .get("/classes/dayWork", {
          params: {
            ...this.query,
            grade_id: this.data.grade_id,
            class_id: this.data.class_key,
            schoole_id: this.id,
            gender: this.query.gender == "99" ? "" : this.query.gender,
          },
        })
        .then((res) => {
          this.loading = false;
          this.total = res.data.count;
          this.list = res.data.data;
          this.obj=res.data.params
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    apiListss1() {
      this.$http
        .get("/classes/monthWork", {
          params: {
            ...this.query,
            grade_id: this.data.grade_id,
            class_id: this.data.class_key,
            schoole_id: this.id,
            gender: this.query.gender == "99" ? "" : this.query.gender,
          },
        })
        .then((res) => {
          this.loading = false;
          this.total = res.data.count;
          this.list = res.data.data;
          this.obj=res.data.params
        })
        .catch((e) => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    /* 导出数据Excel */
    exportExcel(type) {
      let info = JSON.parse(JSON.stringify(this.query));
      console.log(info);
      this.$http
        .get(
          type == 1
            ? "/classes/dayWorkExportExcel"
            : "/classes/monthWorkExportExcel",
          {
            params: { ...this.query, export_type: 0,
              grade_id: this.data.grade_id,
            class_id: this.data.class_key,
            schoole_id: this.id,
            gender: this.query.gender == "99" ? "" : this.query.gender,
             },
          }
        )
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
            // 下载文件
            window.location.href = data.data;
            this.$message({
              type: "success",
              message: "导出成功",
            });
          } else {
            this.$message.error("导出失败");
          }
        });
    },
  },
};
</script>

<style scoped >
.ele-form-actions {
  display: flex;
  justify-content: flex-end;
}
</style>
